<script lang="ts" setup>
import { verifyRes, delVerRecord, manyDelVerRecord } from '../../../../api/verRecord'
import { HttpStatusCode } from "axios"
import { ElMessage, ElMessageBox } from 'element-plus'


const emits = defineEmits(['increase'])
const props = defineProps<{
  dataList: ListVerRecord[],
  loading: boolean
}>()
let ids = reactive<string[]>([])

const handleSelectionChange = (val: ListVerRecord[]) => {
  ids = val.map(item => {
    return item.id
  })
}
const delMany = () => {
  openDelConfirm(ids)
}
defineExpose({ delMany })
const openDelConfirm = (id: string | string[]) => {
  ElMessageBox.confirm(
      '您确定要删除此记录吗?',
      '删除任务',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delService(id)
  })
}
const delService = async (id: string | string[]) => {
  let res: Result<string>
  if(typeof id !== 'string') {
    if(id.length === 0) return
    res = await manyDelVerRecord(id.join(","))
  } else {
    res = await delVerRecord(id)
  }
  if(res.statusCode === HttpStatusCode.Created || res.statusCode === HttpStatusCode.Ok) {
    ElMessage({
      message: res.data as string,
      type: 'success'
    })
    emits('increase', 1, '')
  } else {
    ElMessage({
      message: '删除失败',
      type: 'error'
    })
  }
}
const verify = async (ver_id: string, houseResId: string) => {
  ElMessageBox.confirm(
      '您确定要核销此记录吗?',
      '核销记录',
      {
        confirmButtonText: '确认核销',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    let data = {
      ver_id,
      houseResId
    }
    const res = await verifyRes(data)
    if(res.statusCode === HttpStatusCode.Ok || res.statusCode === HttpStatusCode.Created) {
      ElMessage({
        message: '核销成功',
        type: 'success',
      })
      emits('increase', 1, '')
    } else {
      ElMessage({
        message: '核销失败，请重试',
        type: 'error',
      })
    }
  })

}
</script>

<template>
  <el-table
      border
      stripe
      v-model:data="props.dataList"
      table-layout="auto"
      v-loading="loading"
      style="width: 100%"
      height="500px"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="30" fixed />
    <el-table-column
        prop="ver_user_name"
        label="经纪人名称"
        align="center"
        width="100"
    />
    <el-table-column
        prop="ver_phone"
        label="经纪人电话"
        align="center"
        width="200"
    />
    <el-table-column
        prop="ver_mark"
        label="核销说明"
        align="center"
    />
    <el-table-column
        label="状态"
        align="center"
        width="90"
    >
      <template #default="scope">
        <el-tag :type="scope.row.ver_status ? 'success' : 'info'">{{scope.row.ver_status ? '已核销' : '未核销'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="description"
        label="操作"
        align="center"
        fixed="right"
        width="180"
    >
      <template #default="scope">
        <span v-if="!scope.row.ver_status" style="font-size: 14px;color: #6e6efd;cursor:pointer;" @click="verify(scope.row.id, scope.row.houseResId)">核销</span>
        <span v-else style="font-size: 14px;color: rgb(128,128,128);cursor:pointer;">已核销</span>
        <span style="color: red;font-size: 14px;margin-left: 10px;cursor: pointer;" @click="openDelConfirm(scope.row.id)">删除</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>

</style>
